import { useEffect, useState } from 'react';
import { getQuestionVoByAppIdUsingGet } from '@/services/backend/questionController';
import { Button, Card, message, Radio } from 'antd';
import { addUserAnswerUsingPost, getUserAnswerVoByIdUsingGet } from '@/services/backend/userAnswerController';

const Answer: React.FC = () => {

    const [questionDetail, setQuestionDetail] = useState<API.QuestionVO>();
    const [questionContent, setQuestionContent] = useState<API.QuestionContent[]>([]);
    const [questionIndex, setQuestionIndex] = useState<number>(0);
    const [answerOption, setAnswerOption] = useState<string[]>([]);
    const [answerResult, setAnswerResult] = useState<API.UserAnswerVO>({});
    const [finishAnswer, setFinishAnswer] = useState<boolean>(false);
    // const [appId, setAppId] = useState<number>(0);

    useEffect(() => {
        const searchParams = window.location.search.split('=')[1];
        console.log(searchParams)
        getQuestionVoByAppIdUsingGet({
            appId: '1966725318378852353'
        }).then(res => {
            setQuestionDetail(res.data);
            setQuestionContent(res.data?.questionContent || []);
        })
    }, [])

    // 处理上一题
    const handlePrevious = () => {
        if (questionIndex > 0) {
            setQuestionIndex(preIndex => preIndex - 1);
        } else {
            // 可以添加提示或不执行操作
        }
    };

    // 处理下一题
    const handleNext = () => {
        if (questionIndex < questionContent.length - 1) {
            setQuestionIndex(preIndex => preIndex + 1);
        } else {
            // 可以添加提示或不执行操作
        }
    };

    const handleAnswerChange = (index: number, value: string) => {
        const newAnswers = [...answerOption];
        newAnswers[index] = value;
        setAnswerOption(newAnswers);

        if (index < questionContent.length - 1) {
            setTimeout(() => {
                setQuestionIndex(index + 1);
            }, 500);
        }
    };

    const handleGetAnswerResult = (id: number) => {
        getUserAnswerVoByIdUsingGet({
            id: id
        }).then(res => {
            if (res.data) {
                console.log(res.data)
                setAnswerResult(res.data);
                setFinishAnswer(true);
            }
        })
    }

    const handleSubmitAnswer = () => {
        if (answerOption.filter(item => !item).length > 0) {
            message.error('请回答所有问题');
            return;
        }
        addUserAnswerUsingPost({
            appId: questionDetail?.appId,
            choices: answerOption
        }).then(res => {
            message.success('提交成功');
            if (res.data) handleGetAnswerResult(res.data)
        })
    }

    return (
        <div className='mainContiner' style={{
            height: '100%',
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'gray'
        }}>
            {
                !finishAnswer && <div className='questionContiner' style={{
                    height: '50%',
                    width: '50%',
                    display: 'flex',
                    justifyContent: 'space-around',
                    alignItems: 'center',
                    backgroundColor: 'white'
                }}>
                    <Button style={{ width: 100, height: '80%' }} onClick={handlePrevious}>
                        上一题
                    </Button>
                    {
                        questionContent.map((item, index) => {
                            return (
                                questionIndex === index && (
                                    <Card title={item.title} variant="borderless" style={{ width: 400, height: '100%' }} key={index}>
                                        <div className='questionContent' style={{ height: '100%' }}>
                                            <div className='questionOption'>
                                                <Radio.Group
                                                    value={answerOption[index]}
                                                    options={item.options?.map(ii => {
                                                        return {
                                                            value: ii.key,
                                                            label: ii.value
                                                        }
                                                    })}
                                                    onChange={(e) => handleAnswerChange(questionIndex, e.target.value)}
                                                />
                                            </div>
                                        </div>
                                        {
                                            index === questionContent.length - 1 && answerOption.length === questionContent.length && answerOption.filter(item => !item).length === 0 && (
                                                <div className='submitBtn' style={{ position: 'absolute', bottom: '10px', width: '70%' }}>
                                                    <Button type='primary' block onClick={handleSubmitAnswer}>提交</Button>
                                                </div>
                                            )
                                        }
                                    </Card>

                                )
                            )
                        })
                    }
                    <Button style={{ width: 100, height: '80%' }} onClick={handleNext}>
                        下一题
                    </Button>
                </div>
            }
            {
                finishAnswer && <div className='answerResult' style={{
                    height: '50%',
                    width: '50%',
                    display: 'flex',
                    justifyContent: 'space-around',
                    alignItems: 'center',
                    backgroundColor: 'white'
                }}>
                    <div>
                        结果：{answerResult?.resultDesc}
                    </div>
                </div>
            }


        </div>

    )
}
export default Answer;